<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue系列课程</title>
    <script src="../js/vue.js"></script>

</head>
<body>
<div id="app">

    <h1>{{msg}}</h1>
    输入备忘录内容:<input type="text" v-model="content"> <input type="button" value="添加到备忘录" @click="saveItem"><br>

    <ul v-show="items.length!==0">
        <!--        使用v-for-->
        <li v-for="(item,index) in items">{{index + 1}}. {{item}} <a href="javascript:;" @click="delItem(index)">删除</a></li>
    </ul>
    <h5 v-if="items.length===0">当前备忘录中还没有任何内容</h5>
    <h3>当前备忘录中共:{{items.length}}条</h3>
    <input type="button" value="清空所有记录" @click="delAll">
</div>
</body>
</html>

<script>
    var app = new Vue({
        el: "#app",//代表vue实例作用范围
        data: {    //在vue实例中定义一些列数据
            msg: "备忘录功能实现",
            items: ["今天要好好学习", "今天要去市场买菜", "我们今天学习到了vue"],
            content: ""
        },
        methods: { //在vue实例中定义相关函数
            saveItem() {
                if (!this.content){
                    alert("请输入内容");
                    return;
                }
                this.items.push(this.content);
                this.content = "";
            },
            delItem(index){
                this.items.splice(index,1)
            },
            delAll(){
                this.items = [];
            }
        }

    });
</script>